<div class="middle membership" ng-if="project">
  <div class="middle-header">
    <div class="container-fluid">
      <div class="page-header page-header-bleed-right page-header-bleed-left">
        <h1>
          <a
            class="pull-right btn btn-default"
            href=""
            ng-if="canUpdateRolebindings"
            ng-click="toggleEditMode()">
            <span ng-if="!(mode.edit)">Edit Membership</span>
            <span ng-if="mode.edit">Done Editing</span>
          </a>
           Membership
           <span class="page-header-link">
             <a ng-href="{{'roles' | helpLink}}" target="_blank">
               Learn More <i class="fa fa-external-link" aria-hidden="true"></i>
             </a>
           </span>
        </h1>
      </div>
    </div>
  </div>
  <div class="middle-content" persist-tab-state>
    <div class="container-fluid">
      <alerts alerts="alerts"></alerts>
      <div  ng-if="!(roleBindingsVersion | canI : 'list')">
        <p>You do not have permission to view roles in this project.</p>
      </div>
      <uib-tabset
        ng-if="roleBindingsVersion | canI : 'list'">
        <uib-tab
          ng-repeat="subjectKind in subjectKindsForUI | orderBy: 'sortOrder'"
          active="selectedTab[subjectKind.name]"
          select="selectTab(subjectKind.name)">
          <uib-tab-heading>
            {{subjectKind.name | startCase}}s&nbsp;({{subjectKind.subjects | hashSize}})
          </uib-tab-heading>
          <div ng-if="subjectKind.description">
            <p>
              {{subjectKind.description}}
              <a
                ng-if="subjectKind.helpLinkKey"
                target="_blank"
                ng-href="{{subjectKind.helpLinkKey | helpLink}}"
                class="learn-more-inline">
                Learn More <i class="fa fa-external-link" aria-hidden="true"></i>
              </a>
            </p>
          </div>
          <div
            class="content-pane"
            ng-class="'content-' + subjectKind.name.toLowerCase()">

            <div
              class="col-heading">
              <div class="col-name">
                <h3>Name</h3>
              </div>
              <div class="action-set">
                <div class="col-roles">
                  <h3>Roles</h3>
                </div>
              </div>
            </div>

            <div ng-if="(subjectKind.subjects | hashSize) === 0" class="membership-empty">
              <p>
                <em>There are no {{ subjectKind.name | humanizeKind }}s with access to this project.</em>
              </p>
            </div>
            <div
              ng-repeat="subject in subjectKind.subjects"
              class="item-row highlight-hover">
              <div class="col-name">
                <a
                  ng-if="subject.namespace"
                  target="_blank"
                  ng-href="project/{{project.metadata.name}}/browse/other?kind=ServiceAccount">
                  <span>
                    {{subject.namespace}} /
                  </span>
                  <strong>
                    {{subject.name}}
                  </strong>
                </a>
                <span ng-if="!subject.namespace">
                  <strong>
                    {{subject.name}}
                  </strong>
                  <span
                    class="current-user"
                    ng-if="subject.name === user.metadata.name">
                    (you)
                  </span>
                </span>
              </div>
              <div class="action-set">
                <div class="col-roles">
                  <action-chip
                    ng-repeat="role in subject.roles"
                    key="role.metadata.name"
                    key-help="roleHelp(role)"
                    show-action="mode.edit"
                    action="confirmRemove(subject.name, subjectKind.name, role.metadata.name, subject.namespace)"
                    action-title="Remove role {{role.metadata.name}} from {{subject.name}}"></action-chip>
                </div>
                <div
                  ng-if="mode.edit"
                  class="col-add-role">
                  <div class="col-add-role-inputs">
                    <ui-select
                      ng-if="filteredRoles.length"
                      ng-model="subject.newRole"
                      theme="bootstrap"
                      search-enabled="true"
                      title="Select a new role for {{subject.name}}"
                      class="select-role">
                      <ui-select-match
                        placeholder="Select a role">
                        <span ng-bind="subject.newRole.metadata.name"></span>
                      </ui-select-match>
                      <ui-select-choices
                        repeat="role as role in filteredRoles | filter: excludeExistingRoles(subject.roles) | filter: { metadata: { name: $select.search } } track by (role | uid)">
                        <div
                          ng-bind-html="role.metadata.name | highlight: $select.search"
                          title="{{role.metadata.name}}"></div>
                        <div
                          ng-if="role | annotation : 'description'"
                          title="{{role.metadata.name}}">
                          <small>{{role | annotation : 'description'}}</small>
                        </div>
                      </ui-select-choices>
                    </ui-select>
                    <button
                      ng-disabled="disableAddForm || (!subject.newRole)"
                      ng-click="addRoleTo(subject.name, subjectKind.name, subject.newRole, subject.namespace)"
                      class="btn btn-default add-role-to">
                      Add
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <ng-form
              class="new-binding"
              novalidate
              name="forms.newBindingForm"
              ng-if="newBinding">
              <div
                ng-if="mode.edit"
                class="item-row form-new-role">
                <div class="col-name service-account">
                  <label
                    ng-attr-for="newBindingName"
                    class="sr-only">
                    Name
                  </label>

                  <!-- name entry field for everything but service accounts -->
                  <input
                    ng-if="newBinding.kind !== 'ServiceAccount'"
                    type="text"
                    class="form-control input-name"
                    placeholder="Name"
                    ng-model="newBinding.name"
                    autocorrect="off"
                    autocapitalize="none"
                    spellcheck="false">
                  <!-- namespace entry/picker for service accounts -->
                  <div
                    ng-if="newBinding.kind === 'ServiceAccount'"
                    class="service-account-namespace"
                    aria-hidden="true">
                    <ui-select
                      ng-model="newBinding.namespace"
                      on-select="selectProject($item, $model)"
                      theme="bootstrap"
                      search-enabled="true"
                      title="Select a project"
                      class="select-project">
                      <ui-select-match
                        placeholder="Select a project">
                        <span>{{newBinding.namespace}}</span>
                      </ui-select-match>
                      <ui-select-choices
                        repeat="projectName in projects | filter: $select.search"
                        refresh="refreshProjects($select.search)"
                        refresh-delay="200">
                        <div ng-bind-html="projectName | highlight : $select.search"></div>
                      </ui-select-choices>
                    </ui-select>
                  </div>

                  <span
                    ng-if="newBinding.kind === 'ServiceAccount'"
                    class="mar-left-sm mar-right-sm">/</span>

                  <!-- name entry/picker for service accounts -->
                  <div
                    ng-if="newBinding.kind === 'ServiceAccount'"
                    class="service-account-name">
                    <ui-select
                      ng-model="newBinding.name"
                      theme="bootstrap"
                      search-enabled="true"
                      title="Select a service account"
                      class="select-service-account">
                      <ui-select-match
                        placeholder="Service account">
                        <span>{{newBinding.name}}</span>
                      </ui-select-match>
                      <ui-select-choices
                        repeat="saName in serviceAccounts | filter: $select.search"
                        refresh="refreshServiceAccounts($select.search)"
                        refresh-delay="200">
                        <div ng-bind-html="saName | highlight : $select.search"></div>
                      </ui-select-choices>
                    </ui-select>
                  </div>
                </div>
                <div class="action-set">
                  <div class="col-add-role">
                    <div ng-show="mode.edit" class="col-add-role-inputs">
                      <ui-select
                        ng-if="filteredRoles.length"
                        ng-model="newBinding.newRole"
                        theme="bootstrap"
                        search-enabled="true"
                        title="new {{subjectKind.name}} role"
                        class="select-role">
                        <ui-select-match
                          placeholder="Select a role">
                          <span ng-bind="newBinding.newRole.metadata.name"></span>
                        </ui-select-match>
                        <ui-select-choices
                          repeat="role as role in filteredRoles | filter: { metadata: { name: $select.search } } track by (role | uid)">
                          <div
                            ng-bind-html="role.metadata.name | highlight: $select.search"
                            title="{{role.metadata.name}}"></div>
                          <div
                            ng-if="role | annotation : 'description'"
                            title="{{role.metadata.name}}">
                            <small>{{role | annotation : 'description'}}</small>
                          </div>
                        </ui-select-choices>
                      </ui-select>
                      <button
                        ng-disabled="disableAddForm || (!newBinding.name) || (!newBinding.newRole)"
                        ng-click="addRoleTo(newBinding.name, newBinding.kind, newBinding.newRole, newBinding.namespace)"
                        class="btn btn-default add-role-to">
                        Add
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </ng-form>

            <div
              ng-if="mode.edit"
              class="show-hidden-roles">
              <div class="checkbox">
                <label>
                  <input
                    type="checkbox"
                    class="toggle-hidden"
                    ng-click="toggleRoles($event)"
                    ng-checked="toggle.roles">
                  Show hidden roles</label>&nbsp;<a href=""
                                                    class="action-inline"
                                                    data-toggle="popover"
                                                    data-trigger="hover focus"
                                                    data-content="System roles are hidden by default and do not typically need to be managed."><i class="pficon pficon-help"></i></a>
              </div>
            </div>
          </div>
        </uib-tab>
      </uib-tabset>
    </div>
  </div>
</div>
